iT邦幫忙

2025 iThome 鐵人賽

DAY 1
0

JavaScript(簡稱 JS)是一種跨平台、物件導向、直譯式的程式語言,最初由 Netscape 在 1995 年推出,用來讓網頁具備互動性。它與 HTML、CSS 並列為前端開發的三大核心技術,但應用範圍早已超越瀏覽器。(不是JAVA只是相近)

  • 直譯執行:不需編譯,瀏覽器或執行環境會直接解讀並執行程式碼
  • 動態型別:變數不需事先宣告型別,可在執行時改變
  • 事件驅動:可監聽並回應使用者操作(點擊、輸入、滑鼠移動等)
  • 原型繼承:透過 prototype 機制實現物件繼承,而非傳統類別繼承

常見應用

領域 範例
前端開發 操作 DOM、表單驗證、動畫效果
後端開發 使用 Node.js 建立 API 或 Web 服務
行動應用 React Native、Ionic 等跨平台框架
桌面應用 Electron 製作跨平台桌面軟體

簡單範例

  1. JavaScript 可以更改 HTML 內容
  • 找到一個 HTML 元素(id="demo"),並將元素內容(innerHTML)改為「Hello JavaScript」,getElementById()也是方法之一
<!DOCTYPE html>
<html>
<body>
    
<p id="demo">Hello</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>更改</button>

</body>
</html>

Adobe Express - 錄製內容 2025-08-25 132107 (1)

2.JavaScript 改變 HTML 屬性值

  • JavaScript 變更了標籤的 (source) 屬性的值
<!DOCTYPE html>
<html>
<body>


<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">開</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">關</button>

</body>
</html>

Adobe Express - 錄製內容 2025-08-25 132107 (2)

3.JavaScript 改變 HTML 樣式(CSS)

  • 修改 HTML 元素的樣式,其實就是修改該元素的 style 屬性內容,因此可視為改變 HTML 屬性的一種形式。
<!DOCTYPE html>
<html>
<body>

<p id="demo">Hello</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">變大</button>

</body>
</html> 

錄製內容 2025-08-25 132107 (2)

4.JavaScript 隱藏 HTML 元素

  • 透過改變display樣式來隱藏 HTML 元素,也可來顯示 HTML 元素
<!DOCTYPE html>
<html>
<body>

<p id="demo">Hello</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">隱藏</button>
<button type="button" onclick="document.getElementById('demo').style.display='block'">顯示
</button>
</body>
</html> 

Adobe Express - 錄製內容 2025-09-15 163616


下一篇
JavaScript 該放在哪裡
系列文
30天絕望倒數JavaScript18
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言